隨著科技越來越進步，效能已經不再是瓶頸了。而隨著 webGL 的發展，我們已經不需要安裝其他軟體才能使用 3D，只要有瀏覽器跟先進一點的電腦，很容易就能在電腦裡感受 3D 的世界。

而且隨著 webVR 也逐漸萌芽，3D 的應用想必會越來越廣泛。趁著發展逐漸熱絡之時，我們一起來學習 webGL 與 three.js 吧！

我們活在 3D 的世界

以往如果要在瀏覽器上實作 3d 的效果，我們必須透過 CSS3 的幫忙，像是 translate3d, martix, perspective 之類的屬性來達到 3d 的效果。對於一般的頁面需求來說，這些屬性算是相當夠用了，只要懂得原理也能夠做出非常吸引人的效果。

但，如果要做出更具有互動的效果呢？這時候就需要其他技術的幫助了。

WebGL 是什麼

WebGL 基於OpenGL，是個可以利用 JavaScript API 來操作電腦繪圖的技術。因為是 javascript，所以可以相容於瀏覽器中，不需要再安裝其他軟體。（當然，你的電腦必須要有 GPU 才行）

在進入課程之前，先來看看你的電腦是否支援 webGL 吧！
要查看你的電腦是否支援 webGL，可以到這個連結 測試。如果可以看見

代表你的瀏覽器是支援 WebGL 的，如果沒辦法看見圖形的話，請照著官方的 instruction 做操作。

three.js 又是什麼

如同開頭所說的 webGL 畢竟是基於 openGL 上，也就是說如果不使用任何函式庫的情況下，你必須跟較底層的語法及 API 打交道，這意味著我們需要花更多的成本學習新的語法（不過這個系列也會介紹 webGL 的初階語法就是了）。
three.js 就像是 jQuery 一樣，將一些 webGL 上的操作包裝成較為簡易的 API，方便開發者使用，也不用被過於底層的 API 嚇得屁滾尿流的。

這 30 天系列文章，會讓你對 webGL 語法有粗淺的認識，同時也會把焦點放在 three.js 上，讓各位比較方便地學習 3D 的繪圖技術。如果規劃許可，希望也能夠將 3D 的繪圖原理跟一些影像處理的技巧也一併寫進來。

這是自己第一次挑戰鐵人賽，然後又要上班跟上課，希望不要斷賽才好。

那麼各位，敬請期待囉！